<template>
  <div class="min-h-screen bg-background-900 flex items-center justify-center">
    <div class="max-w-md w-full text-center">
      <div v-if="loading" class="space-y-6">
        <div class="relative">
          <div class="animate-spin rounded-full h-16 w-16 border-4 border-background-600 border-t-primary-500 mx-auto"></div>
          <div class="absolute inset-0 rounded-full border-4 border-transparent border-t-ai-generated animate-ping opacity-20"></div>
        </div>
        <div>
          <h3 class="text-xl font-semibold text-text-primary mb-2">正在处理认证...</h3>
          <p class="text-text-secondary">请稍候，我们正在验证您的身份</p>
        </div>
      </div>
      
      <div v-else-if="error" class="space-y-6">
        <div class="card border-error/30 bg-error/10">
          <div class="flex items-center gap-3 mb-4">
            <div class="w-10 h-10 bg-error/20 rounded-full flex items-center justify-center">
              <svg class="w-5 h-5 text-error" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
            </div>
            <h3 class="text-xl font-semibold text-text-primary">认证失败</h3>
          </div>
          <p class="text-text-secondary">{{ error }}</p>
        </div>
        <router-link 
          to="/login" 
          class="btn-primary inline-flex items-center gap-2"
        >
          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
          </svg>
          返回登录页面
        </router-link>
      </div>
      
      <div v-else class="space-y-6">
        <div class="card border-success/30 bg-success/10">
          <div class="flex items-center gap-3 mb-4">
            <div class="w-10 h-10 bg-success/20 rounded-full flex items-center justify-center">
              <svg class="w-5 h-5 text-success" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path d="M5 13l4 4L19 7"/>
              </svg>
            </div>
            <h3 class="text-xl font-semibold text-text-primary">认证成功</h3>
          </div>
          <p class="text-text-secondary">正在跳转到首页...</p>
        </div>
        <div class="flex items-center justify-center gap-2 text-text-muted">
          <div class="w-2 h-2 bg-primary-500 rounded-full animate-pulse"></div>
          <div class="w-2 h-2 bg-primary-500 rounded-full animate-pulse" style="animation-delay: 0.2s"></div>
          <div class="w-2 h-2 bg-primary-500 rounded-full animate-pulse" style="animation-delay: 0.4s"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { supabase } from '../lib/supabase'

const router = useRouter()
const loading = ref(true)
const error = ref('')

onMounted(async () => {
  try {
    // 处理认证回调
    const { data, error: authError } = await supabase.auth.getSession()
    
    if (authError) {
      error.value = authError.message || '认证处理失败'
    } else if (data.session) {
      // 认证成功，等待一下然后跳转
      setTimeout(() => {
        router.push('/')
      }, 2000)
    } else {
      error.value = '未找到有效的认证会话'
    }
  } catch (err) {
    error.value = '认证处理过程中发生错误'
  } finally {
    loading.value = false
  }
})
</script> 